<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center AIChat_flex_0_ben"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub AIChat_fd0_0_ben'>
					<view class='flex flex-wrap align-center AIChat_fd0_0_c0_ben' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  AIChat_fd0_0_c0_c0_ben'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='AIChat_fd0_0_c1_c0_ben'>{{$t('AI助手')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end AIChat_fd0_0_c0_ben'>
						<!-- <image class='AIChat_fd0_0_c2_c0_ben' mode="aspectFit" :src='STATIC_URL+"JQR.png"'></image> -->
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout AIChat_flex_1_ben0011">
				<view class='flex flex-wrap align-center AIChat_fd1_0_ben0011'>
					<image class='self-start AIChat_fd1_0_c0_ben' mode="aspectFill" src="@/static/img02/jiqir.png">
					</image>
					<text class='AIChat_fd1_0_c1_ben'>{{$t('您好，我是犇小助，有什么可以帮您的？')}}</text>
				</view>
			</view>
			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout AIChat_flex_2_ben01123"
				v-if="chatList.length==''">
				<view class='flex flex-direction flex-wrap align-stretch AIChat_fd2_0_ben01123'>
					<view class='flex flex-wrap align-center AIChat_fd2_0_c0_ben01123'>
						<image class='AIChat_fd2_0_c0_c0_ben01123' mode="aspectFit" :src='STATIC_URL+"1652.png"'>
						</image>
						<text class='AIChat_fd2_0_c0_c1_ben01123'>{{$t('猜你想问')}}</text>
					</view>
					<!-- <view class='flex flex-wrap align-center AIChat_fd2_0_c1_ben01123' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pages/index/classsche/classsche`">
						<text class='AIChat_fd2_0_c1_c0_ben01123'>{{$t('1、打开我的课程表')}}</text>
					</view>
					<view class='flex flex-wrap align-center AIChat_fd2_0_c1_ben01123' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pages/Mymine/mance/mance`">
						<text class='AIChat_fd2_0_c1_c0_ben01123'>{{$t('2、我的考试成绩')}}</text>
					</view>
					<view class='flex flex-wrap align-center AIChat_fd2_0_c1_ben01123' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pages/Mymine/MyPortrayal/MyPortrayal`">
						<text class='AIChat_fd2_0_c1_c0_ben01123'>{{$t('3、打开我的画像')}}</text>
					</view> -->
					<view class='flex flex-wrap align-center AIChat_fd2_0_c1_ben01123' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pages/tabBar/course/course`">
						<text class='AIChat_fd2_0_c1_c0_ben01123'>1、打开我的课程</text>
					</view>
					<view class='flex flex-wrap align-center AIChat_fd2_0_c1_ben01123' @tap.stop="handleJumpDiy"
						data-type="navigateTo" :data-url="`/pages/Mymine/MyPortrayal/MyPortrayal`">
						<text class='AIChat_fd2_0_c1_c0_ben01123'>2、打开我的画像</text>
					</view>
					<view class='flex flex-wrap align-center AIChat_fd2_0_c1_ben01123' @tap.stop="jumps">
						<text class='AIChat_fd2_0_c1_c0_ben01123'>3、打开我的错题</text>
					</view>
				</view>
			</view>
			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout AIChat_flex_1_ben">
				<template v-for='(item,key0) in chatList'>
					<view class='flex flex-direction flex-wrap align-stretch AIChat_fd1_0_ben' :key='key0'>
						<view class='flex flex-wrap align-center justify-end'>
							<text class='AIChat_fd1_0_c0_c1_ben'>{{$t(item.question)}}</text>
							<image class='self-start AIChat_fd1_0_c1_c1_ben' mode="aspectFill" :src='UserInfo.avatar'>
							</image>
						</view>
						<view class='flex flex-wrap align-center AIChat_fd1_0_ben' v-if="item.answer">
							<image class='self-start AIChat_fd1_0_c0_c0_ben' mode="aspectFill"
								src="@/static/img02/jiqir.png"></image>
							<text class='AIChat_fd1_0_c0_c1_ben'>{{$t(item.answer)}}</text>
						</view>

					</view>
				</template>

			</view>
			<!---flex布局flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center AIChat_flex_2_ben"
				:style="{height:(110+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">
				<view class='flex flex-wrap align-center AIChat_fd2_0_ben'>
					<benben-input class='flex-sub AIChat_fd2_0_c0_ben' type="text" :placeholder="$t('请输入问题')"
						confirm-type="done" :maxlength="-1" :adjust-position='false'
						placeholder-style="color:#999;font-size:28rpx" v-model="keyword" @confirm="Send()" />
				</view>
				<image class='AIChat_fd2_1_ben' mode="aspectFit" :src='STATIC_URL+"FS.png"' @tap.stop="Send()">
				</image>

			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>


		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"keyword": "",
				"Progressing": false,
				"AI_Loading": false,
				"Progressing": false,
				"chatList": [],
				"UserInfo": {},
				num:'0',//错题数量
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {

			// this.Send()

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getck6f4cf3a2bf31Func()
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			async Send() {
				if (!validate(this.keyword, 'require')) {
					this.$message.info(global.i18n.t('问题不能为空'));
					return false;
				}
				let CurrentIndex = new Date().getTime()
				let obj = {
					aid: CurrentIndex,
					question: this.keyword,
					answer: ''
				}
				this.chatList.push(obj)
				console.log(obj, 'objobjobjobj');
				uni.showLoading({
					title: 'AI正在思考中...',
				});
				//请求方法
				//数据验证
				// console.log('走到这里了吗');
				let data662c96aab794d = await this.$api.post(global.apiUrls.post68c910fcdbef9, {
					query: this.keyword,
					agent_id:62,
				});

				if (data662c96aab794d.data.code != 1) {
					this.$message.info(data662c96aab794d.data.msg);
					return
				}
				// console.log('走到这里了吗');
				let info662c96aab794d = data662c96aab794d.data;

				console.log(info662c96aab794d, '走到这里了吗');
				// let res = await GPTContent(keyword.value)
				uni.hideLoading()
				this.keyword = ''
				this.chatList.forEach(item => {
					if (item.aid == CurrentIndex) {
						// item.answer = info662c96aab794d.data.choices[0].message.content
						item.answer = info662c96aab794d.data.answer
					}
					console.log(item, '————————————————————————————————————————————');
					return item
				})
				// this.loadingData()
			},
			//APP接口-我的画像-个人信息
			async getck6f4cf3a2bf31Func() {
				//请求方法
				//数据验证

				let dataUserInfo = await this.$api.get(global.apiUrls.post66f4cf3a2bf31, {

				});

				if (dataUserInfo.data.code != 1) {
					this.$message.info(dataUserInfo.data.msg);
					return
				}
				let infoUserInfo = dataUserInfo.data;
				this.UserInfo = infoUserInfo.data
				//错题数量
				const res1 = await this.$api.get(global.apiUrls.post67735544acf41, {});
				this.num = res1.data.data.count
			},
			jumps(){
				if (this.num==0) {
					this.$message.info('暂无错题')
					return
				}
				uni.navigateTo({
					url: "/pages/tabBar/wrongQuestion/wrongQuestion?type=2"
				})
			},
			// async loadingData() {
			// 	this.Progressing = true
			// 	this.AI_Loading = true
			// 	this.loadingData()
			// 	console.log(data662c96aab794d, '22222222222222222222222222222222');
			// 	// const res = await getGptContent(keyword)
			// 	// if (res.code !== '1') return ElMessage.error(res.msg)
			// 	// console.log(res.data.choices[0].message.content);
			// 	this.AI_Loading = false
			// 	this.Progressing = false
			// 	return res.data.content
			// 	// return res.data.choices[0].message.content
			// }









			//提交聊天
			// async postChatFunc() {
			// 	//请求方法
			// 	//数据验证

			// 	let data662c96aab794d = await this.$api.post(global.apiUrls.post662c96aab794d, {
			// 		content: this.keyword
			// 	});

			// 	if (data662c96aab794d.data.code != 1) {
			// 		this.$message.info(data662c96aab794d.data.msg);
			// 		return
			// 	}
			// 	let info662c96aab794d = data662c96aab794d.data;


			// }
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.AIChat_flex_0_ben {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.AIChat_fd0_0_c2_c0_ben {
		width: 40rpx;
		height: 40rpx;
	}

	.AIChat_fd0_0_c1_c0_ben {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.AIChat_fd0_0_c0_c0_ben {
		font-size: 36rpx;
		color: #333;
	}

	.AIChat_fd0_0_c0_ben {
		width: 120rpx;
		height: 88rpx;
	}

	.AIChat_fd0_0_ben {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.AIChat_flex_1_ben {
		margin: 0rpx 0rpx 32rpx 0rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.AIChat_fd1_0_c1_c1_ben {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.AIChat_fd1_0_c0_c1_ben {
		background: #fff;
		padding: 20rpx 16rpx 20rpx 16rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		max-width: 550rpx;
	}

	.AIChat_fd1_0_c0_c0_ben {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.AIChat_fd1_0_ben {
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.AIChat_flex_2_ben {
		background: #fff;
		width: 750rpx;
		height: 110rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-size: 100% auto;
	}

	.AIChat_fd2_1_ben {
		width: 48rpx;
		height: 48rpx;
	}

	.AIChat_fd2_0_c0_ben {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.AIChat_fd2_0_ben {
		background: #F6F7F9;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		width: 606rpx;
		height: 72rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	//
	.AIChat_flex_1_ben0011 {
		padding: 24rpx 24rpx 0rpx 24rpx;
	}

	.AIChat_fd1_0_ben0011 {
		// margin: 0rpx 0rpx 20rpx 0rpx;
	}

	.AIChat_fd1_0_c0_ben {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}

	.AIChat_fd1_0_c1_ben {
		background: #fff;
		padding: 20rpx 16rpx 20rpx 16rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		max-width: 550rpx;
	}

	//
	.AIChat_flex_2_ben01123 {
		margin: 20rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.AIChat_fd2_0_ben01123 {
		background: url(image-path('1651.png')) no-repeat;
		background-size: 100% auto;
		border-radius: 16rpx;
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.AIChat_fd2_0_c0_ben01123 {
		margin: 24rpx 0rpx 24rpx 0rpx;
	}

	.AIChat_fd2_0_c0_c0_ben01123 {
		width: 28rpx;
		height: 28rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.AIChat_fd2_0_c0_c1_ben01123 {
		color: #252525;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
	}

	.AIChat_fd2_0_c1_ben01123 {
		background: rgba(255, 255, 255, 0.7);
		padding: 16rpx 24rpx 16rpx 24rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.AIChat_fd2_0_c1_c0_ben01123 {
		color: #666666;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}
</style>